<template>
	<div class="app-container">
		<div class="bgWhite radius8 flex col-top row-between pt20  pr20" v-if="showFilter == false">
			<el-form class="pl20" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
				label-width="100px">
				<div>
					<el-form-item label="关键字" prop="keyWords">
						<el-input size="large" v-model="queryParams.keyWords" placeholder="关键字" clearable
							style="width: 200px;" />
					</el-form-item>
					<el-form-item label="客户类型" prop="customerType">
						<el-select size="large" v-model="queryParams.customerType" placeholder="客户类型" clearable
							style="width: 200px">
							<el-option v-for="dict in bus_customer_type" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="客户星级" prop="customerStarLevel">
						<el-select size="large" v-model="queryParams.customerStarLevel" placeholder="客户星级" clearable
							style="width: 200px">
							<el-option v-for="dict in bus_customer_starlevel" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="最后跟进时间" label-width="100px" prop="startTime">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
					</el-form-item>
				</div>
			</el-form>
			<div class="flex col-center">
				<div class="main-color cursor mr5" style="width: 40px;line-height: 18px;"
				@click="showFilter = true"
				>
					高级筛选</div>
				<el-button class="searchBtn" type="defaultBtn" size="mini" @click="handleQuery">搜索</el-button>
				<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
			</div>
		</div>
		<!-- 高级筛选 -->
		<filterItem v-if="showFilter == true"
		@queryParamsFunc="queryParamsFunc" 
		@back="showFilter = false" 
		:queryParamsProp="queryParams"
		:propBus="propBus"
		:teamOptions="teamOptions"
		></filterItem>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">公司公海列表</span>
				<div>
					<el-button type="operate" :disabled="multiple" @click="deptReceiveFormSub"
						v-hasPermi="['customer:companyTransferCustomer']">转移客户
					</el-button>
					<el-button link class="linkBtnColor" type="primary" @click="ruleShow"
						v-hasPermi="['customer:companyTransferCustomer']">公海规则说明
					</el-button>
				</div>
			</div>

			<el-table v-loading="loading" :data="deptHighSeasList" @selection-change="handleSelectionChange"
				:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}" :cell-style="{height:'54px'}">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="客户名称" align="center" prop="customerName" />
				<el-table-column label="客户类型" align="center" prop="customerType">
					<template #default="scope">
						<dict-tag :options="bus_customer_type" :value="scope.row.customerType" />
					</template>
				</el-table-column>
				<el-table-column label="星级" align="center" prop="customerStarLevel">
					<template #default="scope">
						<el-rate v-model="scope.row.customerStarLevel" disabled text-color="#ff9900" />
					</template>
				</el-table-column>
				<el-table-column label="客户来源" align="center" prop="opportunityChannel">
					<template #default="scope">
						<dict-tag :options="bus_channel" :value="scope.row.opportunityChannel" />
					</template>
				</el-table-column>
				<el-table-column label="手机号" align="center" prop="phoneNumber" />
				<el-table-column label="最后跟进时间" align="center" prop="latestFollowupTime" />
				<el-table-column label="前业务经理" align="center" prop="businessManagerName" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template #default="scope">
						<el-button link class="linkBtnColor" type="primary" @click="deptReceiveFormSub(scope.row)"
							v-hasPermi="['customer:companyTransferCustomer']">转移客户
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<!--    领取弹出框-->
		<el-dialog :title="title" center v-model="deptReceiveFormOpen" width="450px" append-to-body>
			<el-form ref="refdeptReceiveForm" :model="deptReceiveForm" :rules="deptReceiveFormRules" label-width="80px">
				<el-form-item label="业务经理" prop="businessManagerId">
					<el-select v-model="deptReceiveForm.businessManagerId" placeholder="请选择业务经理" clearable size="large"
						class="my-label">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" :rows="4" placeholder="请输入内容" class="my-label"
						v-model="deptReceiveForm.remark" />

				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="deptReceiveFormOpen = false">取 消</el-button>
				<el-button type="primary" @click="deptReceiveSubmit" class="mainSubBtn">确 定</el-button>
			</div>
		</el-dialog>
		<!--    规则弹出框-->
		<el-dialog :title="title" center v-model="ruleFormOpen" width="450px" append-to-body>
			<el-table v-loading="loading" :data="ruleFormSeasList">
				<el-table-column label="未成交天数" align="center" prop="notTradingDay" />
				<el-table-column label="未跟进天数" align="center" prop="notFollowUpDay" />
			</el-table>
			<div class="color2 fs14 mt10">
				<span
					class="color-red">*</span>超过N天“未成交”和“未跟进”的客户，由系统定时划入公海。从开启公海或获得客户（新增、转移、从公海抢到客户）开始来计算客户多久未达到“成交”和“跟进”状态。
			</div>
		</el-dialog>
	</div>
</template>

<script setup name="teamOpportUnity">
	import { ref } from "vue";
import {
		deptHighSeas,
		deptTransferCustomer,
		getUserListData,
		ruleListData
	} from "@/api/business/companyHighSeas.js";
	import filterItem from '@/components/filterItem/index.vue'

	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_client_tag,
		bus_customer_status,
		bus_customer_type,
		bus_customer_starlevel,
		bus_source,
		bus_channel
	} = proxy.useDict("bus_client_tag","bus_customer_status","bus_customer_type", "bus_customer_starlevel", "bus_source","bus_channel");
	const propBus = {
		bus_client_tag:bus_client_tag,
		bus_customer_status:bus_customer_status,
		bus_customer_type:bus_customer_type,
		bus_customer_starlevel:bus_customer_starlevel
	}
	const deptHighSeasList = ref([]);
	const showFilter = ref(false);
	const open = ref(false);
	const loading = ref(true);
	const showSearch = ref(true);
	const ids = ref([]);
	const single = ref(true);
	const multiple = ref(true);
	const total = ref(0);
	const title = ref("");
	const teamOptions = ref(undefined);
	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			keyWords: null,
			customerType: null,
			customerStarLevel: null,
			startTime: null,
			endTime: null
		},
		rules: {
			postName: [{
				required: true,
				message: "",
				trigger: "blur"
			}],
		}
	});
	const {
		queryParams,
		form,
		rules
	} = toRefs(data);
	function changeTime(e){
		queryParams.value.startTime = e[0] 
		queryParams.value.endTime = e[1] 
	}
	/** 查询商机列表 */
	function getList() {
		loading.value = true;
		deptHighSeas(queryParams.value).then(response => {
			deptHighSeasList.value = response.rows;
			total.value = response.total;
			loading.value = false;
		});
	}
	function queryParamsFunc(e){
		queryParams.value = e
		getList()
	}
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		if (Array.isArray(queryParams.value.startTime)) {
			let sTime = queryParams.value.startTime[0] + ' 00:00:00';
			let eTime = queryParams.value.startTime[1] + ' 23:59:59';
			queryParams.value.startTime = sTime;
			queryParams.value.endTime = eTime;
		}
		getList();
	}
	const clearPicker = ref(null);
	/** 重置按钮操作 */
	function resetQuery() {
		// clearPicker
		clearPicker.value.clearPickerValue(); // 调用子组件的方法
		queryParams.value.startTime = ''
		queryParams.value.endTime = ''
		proxy.resetForm("queryForm");
		handleQuery();
	}

	//手动领取
	const deptReceiveFormOpen = ref(false);
	const deptReceiveFormData = reactive({
		deptReceiveForm: {},
		deptReceiveFormParams: {
			ids: 0,
			businessManagerId: 0,
			remark: null,
		},
		deptReceiveFormRules: {
			postName: [{
				required: true,
				message: "",
				trigger: "blur"
			}],
		}
	});
	const {
		deptReceiveForm,
		deptReceiveFormRules
	} = toRefs(deptReceiveFormData);

	/** 点击领取 */
	function deptReceiveFormSub(row) {
		let id = row.id || ids.value
		deptReceiveFormOpen.value = true;
		title.value = "转移客户";
		if (!Array.isArray(id)) {
			// 如果id不是数组，将其转换为数组，并且只有一个元素
			id = [id];
		}
		deptReceiveForm.value.ids = id.join(',');
	}

	/** 领取 */
	function deptReceiveSubmit() {
		deptTransferCustomer(deptReceiveForm.value).then(response => {
			deptReceiveFormOpen.value = false;
			getList();
		});
	}

	const userQuery = ref({
		deptId: null
	});

	/**
	 * 获取本人和下级用户数据
	 */
	function getUserList() {
		//根据角色区分，组长调这个接口，否则显示自己。
		// let userInfo = proxy.getUserInfo();
		// //暂定组长角色的编码是admin
		// let roleKeyName = "admin"
		// let isAllUser = false;
		// userQuery.value.deptId = userInfo.deptId;
		// if (userInfo.roles != null) {
		// 	for (var key of userInfo.roles) {
		// 		if (key.roleKey == roleKeyName) {
		// 			isAllUser = true;
		// 			break;
		// 		}
		// 	}
		// }
		
			//表示是主管校色
			//获取自己和同部门的用户信息
			getUserListData(userQuery.value).then(response => {
				teamOptions.value = response.data;
			});
		// } else {
		// 	teamOptions.value = [{
		// 		"userId": userInfo.userId,
		// 		"userName": userInfo.userName,
		// 	}]
		// }
	};

	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map(item => item.id)
		single.value = selection.length !== 1
		multiple.value = !selection.length
	}

	const ruleFormOpen = ref(false);

	function ruleShow() {
		ruleFormOpen.value = true;
		title.value = "公海规则说明";
	}

	/*规则说明数据*/
	const ruleFormSeasList = ref([{
		notTradingDay: 0,
		notFollowUpDay: 0
	}]);

	function getRuleCode() {
		let rulesCode = 'dept_highseas'
		ruleListData(rulesCode).then(response => {
			ruleFormSeasList.value[0].notTradingDay = response.data.executionContent.notTrading.day;
			ruleFormSeasList.value[0].notFollowUpDay = response.data.executionContent.notFollowUp.day;
			console.log(ruleFormSeasList.value);
		});
	}
	getRuleCode();
	getList();
	getUserList();
</script>
<style>
	.my-label {
		width: 300px;
	}
</style>